<template>
  <view>
    <view
      class="icon-picker-list_container"
      :class="{ 'icon-picker-list_container--center': isBlankIconList }"
    >
      <view
        v-for="item in curRenderIconList"
        :key="item.fullName"
        class="icon-picker-list_item"
        :class="{ actived: curPickedIcon === item.fullName }"
        @click="onPickedIcon(item.simpleName)"
        :title="item.fullName"
      >
        <gd-icon :icon-name="item.fullName" size="30px"></gd-icon>
        <view class="label">{{ item.simpleName }}</view>
      </view>
      <template v-if="isBlankIconList">
        <view style="text-align: center; font-size: 20px">
          {{ curPickedIcon ? "图标列表为空,请重写搜索" : "请先选择icon组" }}
        </view>
      </template>
    </view>
    <el-pagination
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[100]"
      :pager-count="5"
      size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.totalCount"
      @current-change="onCurrentChange"
    />
  </view>
</template>
<script setup>
import { computed, watch } from "vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  curIconItemListPrefix: {
    type: String,
    default: "",
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 100,
      totalCount: 0,
    }),
  },
  contentHeight: {
    type: String,
    default: "480px",
  },
  //list先赋值、curPickedIcon再赋值
  curPickedIcon: {
    type: String,
    default: "",
  },
  filterIconItemIdxList: {
    type: [Object, String],
    default: () => null,
  },
});
const transGetIconName = (iconName, toName = "FullName") => {
  if (toName === "FullName") {
    if (props.curIconItemListPrefix) {
      return `${props.curIconItemListPrefix}:${iconName}`;
    } else {
      return iconName;
    }
  } else {
    const arr = iconName.split(":");
    if (arr.length === 2) {
      return arr[1];
    } else {
      return arr[0];
    }
  }
};
const curRenderIconList = computed(() => {
  let allList = [...props.list];
  if (Array.isArray(props.filterIconItemIdxList)) {
    allList = props.filterIconItemIdxList.map((el) => allList[el]);
  }
  const pagination = props.pagination;
  const startIdx = (pagination.pageNum - 1) * pagination.pageSize;
  return allList.slice(startIdx, startIdx + 100).map((el) => {
    return {
      simpleName: el,
      fullName: transGetIconName(el),
    };
  });
});
const unWatch = watch(
  () => props.curPickedIcon,
  (newVal, oldVal) => {
    if (newVal) {
      const renderList = curRenderIconList.value;
      const matchedIdx = renderList.findIndex(
        (el) => el.simpleName === transGetIconName(newVal, "SimpleName")
      );
      if (matchedIdx !== -1) {
        //unWatch();
        props.pagination.pageNum = Math.ceil(
          (matchedIdx + 1) / props.pagination.pageSize
        );
      }
    }
  },
  { immediate: true }
);
const isBlankIconList = computed(() => {
  return curRenderIconList.value.length === 0;
});
const onCurrentChange = (v) => {};
const _emits = defineEmits(["update:curPickedIcon"]);
const onPickedIcon = (item) => {
  _emits("update:curPickedIcon", transGetIconName(item, "FullName"));
};
</script>
<style lang="scss" scoped>
.icon-picker-list_container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: v-bind("props.contentHeight");
  overflow-y: scroll;
  &.icon-picker-list_container--center {
    justify-content: center;
  }
  .icon-picker-list_item {
    flex: 0 0 auto;
    width: calc(100% / 5);
    text-align: center;
    color: #797979;
    padding: 5px;
    border-top-left-radius: 5px; //左上角添加矩形
    border-top-right-radius: 5px; //右上角添加矩形
    border-bottom-left-radius: 5px; //左下角添加矩形
    border-bottom-right-radius: 5px; //右下角添加矩形
    .label {
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
  }
  .actived,
  .icon-picker-list_item:hover {
    border: 1px solid #409eff;
    //color:#fff;
    cursor: pointer;
  }
}
</style>
